extends layouts/index.pug

block style
  link(rel="stylesheet", href="/css/swiper.css")
  link(rel="stylesheet", href="/css/index.css")

block script
  script(src="/lib/swiper.min.js" charset="utf-8")

block content
  section#product-container
    #product-swiper.swiper-container(style="height: 100%")
      .swiper-wrapper
        each item in productBanner
          .swiper-slide
            .product-slide
              if item.media === 'picture'
                img.product-slide__media(src=`${item.url}`)
                .product-slide-inner
                  p.product-slide__model #{item.model}
                  h2.product-slide__title #{item.title}
                  p.product-slide__desc #{item.desc}
              else
                video.product-slide__media(
                  loop
                  autoplay
                  muted
                  playsinline
                  type="video/mp4"
                  draggable="false"
                  src=`${item.url}`) 当前浏览器不支持 video直接播放

      .product-swiper-pagination
        .swiper-pagination
        .product-pagination-group
          a.product-pagination__button.prev(href="javascript:;")
            img(src="/image/arrow_left.png")
            | PREV
          a.product-pagination__button.next(href="javascript:;")
            | NEXT
            img(src="/image/arrow_right.png")

      .product-pagination-step
        div.product-pagination-step-fraction
          span.product-pagination-step-current 01
          span.product-pagination-step-total 0#{productBanner.length}
        i.product-pagination-step-line scroll
        img(src="/image/mouse.png")

  section#solve-container
    h3.solve-title
      p SOLVE PROGRAM
      p 解决方案

    .swiper-container(style="height: 100%")
      .swiper-wrapper
        each item, index in solveBanner
          .swiper-slide
            img(src=`${item.url}` style="height: 100%; width: 100%")

            .solve-desc
              h4.solve-desc-title #{item.title}
                i 0#{index + 1}

              a.solve-desc-more(href="javascript:;") #{item.more}
                span.solve-desc-more__icon
                  img(src="/image/more.png")

    #solve-item
      .swiper-container
        .swiper-wrapper
          each item in solveItem
            .swiper-slide
              a.solve-item-slide(href="javascript:;")
                div
                  h4.solve-item-slide__title #{item.title}
                  i.solve-item-slide__desc #{item.translate}
                img.solve-item-slide__icon(src=`${item.icon}`)

      a.solve-item-button.prev(href="javascript:;")
        img(src="/image/case_l.png")
      a.solve-item-button.next(href="javascript:;")
        img(src="/image/case_r.png")

  section#product-center
    h5.product-center-bg qianli
    .product-center-inner
      .product-center__header
        h3.product-center__title
          p.en Product Center
          p.cn 产品中心

        nav.product-center-series
          each item in productCenter.series
            a.product-center-nav(href=`${item.link}`) #{item.label}

      .product-center-content
        .product-center-main
          .swiper-container
            .swiper-wrapper
              each item in productCenter.mainBanner
                .swiper-slide
                  .product-center-side.main
                    .product-center-side__content
                      h2.product-center-side__title
                        .bg
                        | #{item.title}
                      p.product-center-side__sub #{item.sub}

                      p.product-center-side__desc
                      +qianli-ghost-button(item.link, 'VIEW MORE')(mode="dark")
                    .product-center-side__legend
                      img(src=`${item.image}`)
            .product-center-navigation
              a.product-center-navigation__button.prev(href="javascript:;")
                img(src="/image/pro_l.png")
              a.product-center-navigation__button.next(href="javascript:;")
                img(src="/image/pro_r.png")

        .product-center-sub
          .swiper-container
            .swiper-wrapper
              each item in productCenter.mainBanner
                .swiper-slide
                  .product-center-side.sub
                    .product-center-side__legend
                      img(src=`${item.image}`)
                    .product-center-side__content
                      h2.product-center-side__title #{item.title}
                        .bg
                      p.product-center-side__sub #{item.sub}

block footer
  script(src="/js/index.js" charset="utf-8")
